{% extends "website/staff/staff_base.html" %}
{% block staff_content %}
<section class="section">
  <div class="card">
    <div class="card-title">
      <div class="icon">👥</div>
      <div>
        <h1 class="h1" style="margin:0">{% if mode == "create" %}Create user{% else %}Edit user{% endif %}</h1>
        <div class="small">Create and manage staff access securely.</div>
      </div>
      <div style="margin-left:auto">
        <a class="btn" href="{% url 'website:staff_user_list' %}">← Back</a>
      </div>
    </div>

    <div class="sep"></div>

    <form method="post">
      {% csrf_token %}
      <div class="grid grid-2">
        {% if mode == "create" %}<div><label class="label">Username</label>{{ form.username }}</div>{% endif %}
        <div><label class="label">First name</label>{{ form.first_name }}</div>
        <div><label class="label">Last name</label>{{ form.last_name }}</div>
        <div><label class="label">Email</label>{{ form.email }}</div>
        <div><label class="label">Active?</label>{{ form.is_active }}</div>
        <div>
          <label class="label">Professional role</label>
          {{ form.role }}
        </div>
      </div>

      {% if mode == "create" %}
      <div class="sep"></div>
      <div class="grid grid-2">
        <div><label class="label">Password</label>{{ form.password1 }}</div>
        <div><label class="label">Confirm password</label>{{ form.password2 }}</div>
      </div>
      {% endif %}

      {% if form.errors %}<div class="card" role="alert">{{ form.non_field_errors }}{% for field in form %}{{ field.errors }}{% endfor %}</div>{% endif %}
      <div style="margin-top:14px">
        <button class="btn" type="submit">Save</button>
      </div>
    </form>
  </div>
</section>
{% endblock %}